<template>
  <div class="hello">
    <div class="wrap">
      <h5 class="title">指标</h5>
        <ul class="list">
          <li>
            <h5 class="listTitle">one</h5>
            <p class="listDet">5分钟</p>
            <div class="listOne clearfix">
              <div class="leftNum"><strong class="leftHarpNum1">20</strong> G</div>
              <div class="rightSur clearfix rightHarpSur1">
                <span>
                  <i style="height: 86.6667px;"></i>
                </span>
                <div class="harp">
                  <span>-30</span>
                  <span class="harpSpan">-20</span>
                  <span class="harpSpan1">-10</span>
                  <span>-0</span>
                </div>
              </div>
                <strong class="oneTime comTime">54:52</strong>
            </div>
          </li>
          <li>
            <h5 class="listTitle">第二个</h5>
            <p class="listDet">5分钟</p>
            <div class="listOne clearfix">
              <div class="leftNum"><strong class="leftHarpNum2">10</strong> G</div>
              <div class="rightSur clearfix rightHarpSur2">
                <span>
                  <i style="height: 43.3333px;"></i>
                </span>
                <div class="harp">
                  <span>-30</span>
                  <span class="harpSpan">-20</span>
                  <span class="harpSpan1">-10</span>
                  <span>-0</span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <h5 class="listTitle">指标</h5>
            <div id="line1-3" style="height: 200px;"></div>
          </li>
          <li>
            <h5 class="listTitle">第三个</h5>
            <div class="botDiv">
              <h6 class="botTitle"><span class="leftHarpNum3">26666</span>个</h6>
              <div class="botEch rightHarpSur3">
                <span>
                  <i style="width: 106.664px;"></i>
                </span>
                <p class="botNum classDiv">
                  <span class="fl">0</span>
                  <span class="fr">50000+</span>
                </p>
              </div>
            </div>
          </li>
          <li>
            <h5 class="listTitle">第4444个</h5>
            <div class="botDiv">
              <h6 class="botTitle"><span class="leftHarpNum4">10000</span>个</h6>
              <div class="botEch rightHarpSur4">
                <span>
                  <i style="width: 40px;"></i>
                </span>
                <p class="botNum classDiv">
                  <span class="fl">0</span>
                  <span class="fr">50000+</span>
                </p>
              </div>
            </div>
          </li>
        </ul>
          
        <h5 class="title">指标</h5>
        <ul class="list">
          <li>
            <h5 class="listTitle">第五条线</h5>
            <p class="listDet">5分钟</p>
            <div class="listOne clearfix">
              <div class="leftNum"><strong class="leftHarpNum5">30</strong> G</div>
              <div class="rightSur clearfix rightHarpSur5">
                <span>
                  <i style="height: 130px;"></i>
                </span>
                <div class="harp">
                  <span>-30</span>
                  <span class="harpSpan">-20</span>
                  <span class="harpSpan1">-10</span>
                  <span>-0</span>
                </div>
              </div>
            </div>
          </li>
          <li style="position: relative;">
            <h5 class="listTitle">饼状图</h5>
            
            <div id="pieMain" style="height: 180px;"></div>
            <span class="number" ref="number"></span>
            <div class="colorDiv">
              <p class="one01"><span>正常</span><i></i></p>
              <p class="one02"><span>警告</span><i></i></p>
              <p class="one03"><span>严重</span><i></i></p>
            </div>
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'HelloWorld',
  data () {
    return {
      option : {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
          show: false,
          feature: {
            mark: {
              show: true
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        series: [{
          name: '业务指标',
          type: 'gauge',
          min: 0,
          max: 100,
          splitNumber: 10, // 分割段数，默认为5
          axisLine: { // 坐标轴线
            lineStyle: { // 属性lineStyle控制线条样式
              color: [
                [0.2, '#228b22'],
                [0.8, '#48b'],
                [1, '#ff4500']
              ],
              width: 5
            }
          },
          axisTick: { // 坐标轴小标记
            splitNumber: 5, // 每份split细分多少段
            length: 0, // 属性length控制线长
            lineStyle: { // 属性lineStyle控制线条样式
              color: 'auto'
            }
          },
          axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: 'auto'
            }
          },
          splitLine: { // 分隔线
            show: true, // 默认显示，属性show控制显示与否
            length: 10, // 属性length控制线长
            lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
              color: 'auto'
            }
          },
          title: {
            show: true,
            offsetCenter: [0, '-40%'], // x, y，单位px
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'bolder'
            }
          },
          detail: {
            formatter: '{value}%',
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: 'auto',
              fontWeight: 'bolder'
            }
          },
          data: [{
            value: 50
          }]
        }]
      },
      option1 : {
        color: ["#9090ff", "#ddd", "#f00", "#F12C78"],
          legend: {
              orient: 'vertical',
              x: 'right',
              y: 'bottom',
              data:[]
          }, 
          series: [
              {
                  name:'',
                  type:'pie',
                  radius: ['50%', '70%'],
                  center : ['45%', '45%'],
                  data:[
                      {value:70, name:'正常'},
                      {value:30, name:'告警'}
                  ],
                  label: {
                      normal: {
                          show: false,
                          position: 'center'
                      },
                      emphasis: {
                          show: false,
                          textStyle: {
                              fontSize: '0',
                              fontWeight: 'bold'
                          }
                      }
                  },
                  labelLine: {
                      normal: {
                          show: false
                      }
                  }
              }
          ]
      },
      timer:null
    }
  },
  mounted() {
    this.newTime()
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('line1-3'));
    var pieChart = echarts.init(document.getElementById('pieMain'));
    
    // 绘制图表
    let _this=this
    myChart.setOption(this.option);
    pieChart.setOption(this.option1)
    setInterval(function() {
      myChart.setOption(_this.option, true);
      pieChart.setOption(_this.option1, true);
    }, 2000);
    $(".number").html((70/100).toFixed(2)* 100 + '%')
    var anum = (70/100).toFixed(2)
    if (anum > 0.8) {
      pieChart.setOption(this.option1 = {
        color: ["#9090ff", "#ddd"],
        legend: {
            orient: 'vertical',
            x: 'right',
            y: 'bottom',
            data:[]
        }, 
        series: [
            {
                name:'',
                type:'pie',
                radius: ['50%', '70%'],
                center : ['45%', '45%'],
                data:[
                    {value:70, name:'正常'},
                    {value:30, name:'告警'}
                ],
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '0',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                }
            }
        ]
      })
    } else if (anum > 0.4 && anum < 0.8) {
      pieChart.setOption(this.option1 = {
        color: ["#f00", "#ddd"],
        legend: {
            orient: 'vertical',
            x: 'right',
            y: 'bottom',
            data:[]
        }, 
        series: [
            {
                name:'',
                type:'pie',
                radius: ['50%', '70%'],
                center : ['45%', '45%'],
                data:[
                    {value:70, name:'正常'},
                    {value:30, name:'告警'}
                ],
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '0',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                }
            }
        ]
      })
    } else {
      pieChart.setOption(this.option1 = {
        color: ["#F12C78", "#ddd"],
        legend: {
            orient: 'vertical',
            x: 'right',
            y: 'bottom',
            data:[]
        }, 
        series: [
            {
                name:'',
                type:'pie',
                radius: ['50%', '70%'],
                center : ['45%', '45%'],
                data:[
                    {value:70, name:'正常'},
                    {value:30, name:'告警'}
                ],
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '0',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                }
            }
        ]
      })
    }
  },
  methods: {
    newTime () {
      this.value="取消计时";
      var miao=60;
      var Fen = 60
      this.timer=setInterval(
      function()
      {
        if(Fen==0&&miao==1)//分钟数=0的时候
        {
          clearInterval(this.timer);
        }
        if(Fen>=0&&Fen<=10)//分钟数0~10
        {
          miao--;
          if(miao==0)//秒数等于0的时候
          {
            miao=60;
            $(".oneTime").get(0).innerHTML="0"+Fen+":"+"00";
          }
          if(miao>0&&miao<10)//秒数0~10的时候
          {
            miao="0"+miao;
            $(".oneTime").get(0).innerHTML="0"+Fen+":"+miao;
          }
          if(miao>=10&&miao!=60)//秒数大于等于10的时候
          {
            if(miao==59)
            {
              Fen--
            }
            $(".oneTime").get(0).innerHTML="0"+Fen+":"+miao;
          }
        }
        if(Fen>10)//分钟数大于10的时候
        {
          miao--;
          if(miao==0)//秒数等于0的时候
          {
            miao=60;
            $(".oneTime").get(0).innerHTML=Fen+":"+"00";
          }
          if(miao>0&&miao<10)//秒数0~10的时候
          {
            miao="0"+miao;
            $(".oneTime").get(0).innerHTML=Fen+":"+miao;
          }
          if(miao>=10&&miao!=60)
          {
            if(miao==59)
            {
              Fen--
            }
            $(".oneTime").get(0).innerHTML=Fen+":"+miao;
          }
        }
      },
      1000
      )
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{ margin: 0; padding: 0; font-size: 14px; color: #333; list-style: none;}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.fl{ float: left;}
.fr{ float: right;}
.wrap{ width: 1160px; margin: 0 auto;}
.title{ padding: 20px 10px; font-size: 16px;}
.list{ overflow: hidden;}
.list li{ float: left; width: 200px; height: 200px; padding: 10px; border: 1px solid #ddd;}
.listTitle{ font-size: 18px;}
.listDet{ color: #666; padding: 10px 0;}
.listOne{ position: relative; height: 130px;}
.comTime{ position: absolute; left: 0; bottom: 0px; font-weight: normal; color: #999;}
.leftNum{ line-height: 130px; width: 150px; float: left;}
.leftNum strong{ display: inline-block; width: 100px; text-align: center; font-size: 28px; color: #0062CC;}
.rightSur{ width: 30px; width: 50px; float: right;}
.rightSur>span{
	position: relative; float: left;
	display: block; width: 10px; height: 130px; background-color: #ddd; border-radius: 50px;
}
.rightSur>span i{
	position: absolute;
	display: block; left: 0; bottom: 0; width: 10px; background-color: #0062CC; border-radius: 50px;
}
.harp span{ display: inline-block; padding-left: 5px; color: #666;}
.harp{ width: 20px; float: left;}
.harpSpan{ padding: 18px 0;}
.harpSpan1{ padding-bottom: 18px;}

.botTitle{ text-align: center; padding: 40px 0 20px;}
.botTitle span{ color: #0062CC; font-size: 28px;}
.botEch{}
.botEch>span{ position: relative; display: block; width: 100%; height: 10px; background-color: #ddd; border-radius: 50px;}
.botEch>span>i{
	position: absolute;
	display: block; left: 0; bottom: 0; height: 10px; background-color: #0062CC; border-radius: 50px;
}
.botNum{ padding-top: 10px;}
.botNum span{ color: #999;}
.number{ position: absolute; left: 40%; top: 48%;}
.colorDiv{ position: absolute; right: 5px; bottom: 10px;}
.colorDiv>p{ overflow: hidden;}
.colorDiv>p span{ float: left;}
.colorDiv>p i{ float: right; width: 20px; height: 10px; border-radius: 5px; margin-top: 4px; margin-left: 2px;}
.one01 i{ background-color: #9090ff;}
.one02 i{ background-color: #f00;}
.one03 i{ background-color: #F12C78;}




</style>
